<script setup>
const data = reactive({
  form: {
    id: "(1, 100)",
    symbol: '["<","<=","==","!=",">",">="]',
    int: "[0, 65535]",
    str: "[3, 15]",
    hex: "[3, 15]",
    ip: "[1,0xffffffff]",
    ipv6: "[1,0x100000000000000000000000000000000]",
    port: "[0,65535]",
    mask: "[16,31]",
    mac: "[0x00, 0xff]",
    proto: '["ip","tcp","udp"]',
    direc: '["->","<>"]',
    offset: "[0, 15]",
    action: '["forword()"]',
    regex: '["[\S\s]+"]',
    meta: '["http.host"]',
  },
});

const { form } = toRefs(data);

defineExpose({
  form,
});
</script>
<template>
  <el-form
    ref="addRef"
    :model="form"
    size="default"
    label-position="top"
    label-width="100px"
  >
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="数量(id)" prop="id">
          <el-input v-model="form.id" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="运算符(symbol[1|2])" prop="symbol">
          <el-input v-model="form.symbol" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="整型(int[1|2])" prop="int">
          <el-input v-model="form.int" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="字符型(str[1|2])" prop="str">
          <el-input v-model="form.str" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="MAC(smac|dmac)" prop="mac">
          <el-input v-model="form.mac" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="HEX(hex[1|2])" prop="hex">
          <el-input v-model="form.hex" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="协议(proto)" prop="proto">
          <el-input v-model="form.proto" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="方向(direc)" prop="direc">
          <el-input v-model="form.direc" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="IP(sip|dip)" prop="ip">
          <el-input v-model="form.ip" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="IPv6(sipv6|dipv6)" prop="ipv6">
          <el-input v-model="form.ipv6" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="端口(sport|dport)" prop="port">
          <el-input v-model="form.port" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="掩码(smask|dmask)" prop="mask">
          <el-input v-model="form.mask" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="偏移(offset)" prop="offset">
          <el-input v-model="form.offset" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="动作(action)" prop="action">
          <el-input v-model="form.action" placeholder="请输入范围" clearable />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col>
        <el-form-item label="正则(regex)" prop="regex">
          <el-input
            v-model="form.regex"
            placeholder="请输入范围"
            clearable
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col>
        <el-form-item label="元数据(meta)" prop="meta">
          <el-input
            v-model="form.meta"
            placeholder="请输入范围"
            clearable
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <p style="color: red;">注：类型为`[]`时，随机选择数组中的值;</br>类型为`()`时，伴随id自增。</p>
</template>
